import {
    PageHeader, Button, Form, Input, Select, Row, Col
    , DatePicker, Space
} from 'antd'
import index from './index.scss'
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
import { useState } from 'react'
import AllData from '../../api/AllXie'
moment.locale('zh-cn')
const TableHeader = (props) => {
    const [isstatus, setIsstatus] = useState(0)
    const { RangePicker } = DatePicker;
    // function onok(value) {
    //     // moment(values.time).format('YYYY-MM-DD HH:mm:ss')
    //     //这么解决的
    //     console.log(value);
    //     setTime1(moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss'))
    //     setTime2(moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss'))
    //     console.log('onOk: ', moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss'),
    //         moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss'));
    // }


    //时间选择器
    const routes = [
        {
            path: 'index',
            breadcrumbName: '课程管理',
        },
        {
            path: 'second',
            breadcrumbName: props.titjump,
        },
    ];
    // 表单
    const [ConditionForm] = Form.useForm();
    // 日期点击事件
    const timerlist = [
        { status: 0, name: '今天' },
        { status: 1, name: '昨天' },
        { status: 2, name: '最近七天' },
        { status: 3, name: '最近一个月' }
    ]
    const Btntimerlist = (arr) => {
        let list = [];
        arr.map((v, i) => list.push(<Button type='text' className={v.status === isstatus ? 'tit' : ''
        } onClick={() => { clickTimer(v.status) }} key={i}>{v.name}</Button>))
        return list
    }
    const clickTimer = (value) => {
        setIsstatus(value)
    }
    //搜索

    const onFinish = () => {
        const obj1 = ConditionForm.getFieldsValue()
        if (obj1.onTime !== undefined) {
            delete obj1.onTime;
            let onTime1 = moment(RangePicker[0]).format('YYYY/MM/DD');
            let onTime2 = moment(RangePicker[1]).format('YYYY/MM/DD');
            obj1.onTime1 = onTime1
            obj1.onTime2 = onTime2
        } else {
            delete obj1.onTime;
            obj1.onTime1 = undefined
            obj1.onTime2 = undefined
        }
        console.log(obj1);
        if (props.tit == "视频课程") {
            // console.log(123);
            AllData.InquireVideo(obj1).then((res) => {
                console.log(res.data);
                props.getfn(res.data)
                ConditionForm.resetFields()

            })
            // props.getfn(obj2)
        } else if (props.tit == "图文课程") {
            console.log(234);
        } else {
            console.log(3333);
        }


    }
    // const dianji = (value) => {
    //     setVal(value)
    // }
    return (
        <div style={index} className='headerTit'>
            <div className="bigBox">
                <PageHeader
                    className="site-page-header"
                    title={props.tit}
                    breadcrumb={{
                        routes,
                    }}
                />
                <hr />
                <div className='formBox'>
                    <Form
                        name="basic"
                        form={ConditionForm}
                        labelCol={{ offset: 4 }}

                    >
                        <Row gutter={50} className="coursesel">
                            <Col span={7}>
                                <Form.Item label="课程选择" name="onState">
                                    <Select>

                                        <Select.Option value="0">待上架</Select.Option>
                                        <Select.Option value="1">已上架</Select.Option>
                                        <Select.Option value="2">已下架</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}> <Form.Item label="课程名称" name="videoName">
                                <Input placeholder="请输入" />
                            </Form.Item></Col>
                        </Row>
                        <Row gutter={50}>
                            <Col span={5}>
                                <Form.Item label="上架日期" name='onTime'>
                                    <RangePicker locale={locale} placeholder={['开始时间', '结束时间']}
                                        style={{ width: '380px' }}
                                    />

                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item className='timessel'>
                                    <Space>
                                        {Btntimerlist(timerlist)}
                                    </Space>
                                </Form.Item>
                            </Col>
                            <div className='btnSearch'>
                                <Space>
                                    <Button type="primary" onClick={onFinish}>搜索</Button>
                                    <Button className='reset'> 重置</Button>
                                </Space>
                            </div>
                        </Row>

                    </Form>
                </div>

            </div>
        </div>

    )
}
export default TableHeader